<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Ionic Javascript Action Sheet</title>

    <!-- compiled css output -->
    <link href="css/ionic.app.css" rel="stylesheet">
    <style>
    .icon{font-size:50px}
    </style>
    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <!-- <script src="cordova.js"></script> -->

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter" ng-controller="myCtrl" class="padding">
    <!-- Using Padding -->
    <div class="button button-block button-positive" ng-click="triggerActionSheet()">Action Sheet Button</div>
    <script>
      angular.module('starter', ['ionic'])
      .controller('myCtrl', function($scope, $ionicActionSheet){
        $scope.triggerActionSheet = function() {
          var showActionSheet = $ionicActionSheet.show({
              buttons: [
                { text: "Edit 1" },
                { text: "Edit 2" }
              ],
              destructiveText: "Delete",
              titleText: "Action Sheet",
              cancelText: "Cancel",
              cancel: function() {
                window.alert('cancel');
              },
              buttonClicked: function(index, button) {
                window.alert(button.text);
                return true;
              },
              destructiveButtonClicked: function() {
                window.alert('delete');
                return true;
              }
          });
        }
      })
    </script>
  </body>
</html>
